<template>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

onMounted(() => {
  console.log(JSON.parse(route.query.data))
  const chartDom = document.getElementById('main')
  const myChart = echarts.init(chartDom)
  const option = {
    xAxis: {
      type: 'category'
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        type: 'line'
      }
    ],
    dataset: {
      dimensions: ['uploadTime', 'speed'],
      source: JSON.parse(route.query.data)
    }
  }
  option && myChart.setOption(option)
})
</script>

<style>

</style>
